<template>
	<div>
		<!-- 面包屑导航 -->
		<el-breadcrumb>
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>社交</el-breadcrumb-item>
			<el-breadcrumb-item>广场</el-breadcrumb-item>
		</el-breadcrumb>


		<!-- card -->
		<el-card>
			<div class="box">
				<div class="lift">
					<el-tooltip class="item" effect="dark" content="广场基本操作" placement="top-start">
						<el-button>广场</el-button>
					</el-tooltip>
				</div>
			</div>

			
			<el-row :gutter="400">
				<el-col :span="12">
					<!-- 搜索按钮-->
					<el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getSerchByName">
						<el-button slot="append" icon="el-icon-search" @click="getSerchByName"></el-button>
					</el-input>
				</el-col>
				<el-col :span="4">
					<!-- 添加按钮 -->
					<el-button type="primary" @click="goAddsqPage">新建帖子</el-button>
				</el-col>
			</el-row> 
              <!-- 表单数据展示 -->
			   
			 
			     帖子浏览列表 
		      <el-table :data="squareList" style="width: 100%">
				
				<el-table-column type="expand">
				  
					 <template slot-scope="props" >
					<el-form label-position="left" inline class="demo-table-expand">
					  <el-form-item label="帖子内容:">
					    <span>{{ props.row.content }}</span>
					  </el-form-item>
					  </el-form>
					    </template>
					  </el-table-column>
					  <el-table-column
					    label="标题"
					    prop="title"
						width="150x">
					  </el-table-column>
					  <el-table-column
					    label="作者"
					    prop="name"
					  	width="80px">
					  </el-table-column>
					  <el-table-column
					    label="分区"
					    prop="interest"
					   width="120px">
					  </el-table-column>
					 
					  </el-table-column>
					  <el-table-column
					    label="时间"
					    prop="time"
						width="120px">
					  </el-table-column>
					  
					  <el-table-column label="操作"  width="150">
						<template slot-scope="scope" >
						<el-button-group>
							<!-- 修改按钮-->
							<el-button type="primary" icon="el-icon-edit" @click="showEditDialog(scope.row.id)"></el-button>
							<!-- 删除按钮 -->
							<el-button type="danger" icon="el-icon-delete"@click="removeById(scope.row.id)"></el-button>
						</el-button-group>
					</template>
				</el-table-column>
			</el-table> 
			<!-- 分页 -->
			
				<!-- 
				 @size-change:监听 pagesize 改变的事件——查看handleSizeChange（）
				 @current-change：监听 pagenum 改变的事件——查看handleCurrentChange（）
				 current-page:当前显示的的是 queryInfo.pageNum 的页数
				 page-sizes：为下拉菜单提供size选择数字组
				 page-size：显示当前 queryInfo.pageSize 提供的页面size
				 layout：可以 隐藏/显示 后面写的功能
				 total：获取显示有多少条数据
				  -->
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pageNum"
				 :page-sizes="[5, 10, 15, 20]" :page-size="queryInfo.pageSize" layout="total, sizes, prev, pager, next, jumper"
				 :total="total" background>
				</el-pagination>



		 </el-card> 
		<!-- 修改-->
		  <el-dialog title="修改帖子" :visible.sync="EditDialogVisible" width="50%"@close="editDialogClosed">
			<el-form :model="handleEditFrom" :rules="handleEditFromRules" ref="handleEditFromRef" label-width="70px" >
				<el-form-item label="标题" prop="title">
					<el-input v-model="handleEditFrom.title" disabled></el-input>
				</el-form-item>
				<el-form-item label="兴趣" prop="interest">
					<el-input v-model="handleEditFrom.interest" disabled></el-input>
				</el-form-item>
				<el-form-item label="内容" prop="content">
					<el-input  type="textarea" :rows="4" v-model="handleEditFrom.content" ></el-input>
				</el-form-item>
			</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="EditDialogVisible = false">取 消</el-button>
					<el-button type="primary" class="btnAdd" @click="editsquareInfo()">确 定</el-button>
				</div>
		</el-dialog> 
	</div> 

</template>

<script>
	export default {
		created() {
			this.getSquareList();
		},
		data() {
			return {
				queryInfo: {
					//和后端QueryInfo实体的属性一致
					query: '',
					pageNum: 1,
					pageSize: 5,
				},
			
				squareList: [], //空间信息列表列表
				total: 0, //总记录数
				search: '', //查询表单数据
				EditDialogVisible: false, //控制修改学习笔记对话框的显示与隐藏
				handleEditFrom: {
					title:'',
					content:'',
					time:'',
					interest:'',
				},
				handleEditFromRules:{
				content:[
					{required:true,title:'请输入内容',trigger:'blur'},
				]
				},
			}
		},
		methods: {
            //数据展示的函数
			async getSquareList() {
				//console.log(this.queryInfo1);
				const {
					data: resString
				} = await this.$http.get("square", {
					params: this.queryInfo
				}); //②接收后台返回的string数据： ①访问后台
				//console.log(resString);
				var res = JSON.parse(resString);
				//console.log(res);
				this.squareList = res.data; //data和后端	res.put("numbers", numbers)保持一致
				//console.log(this.spaceList);
				this.total = res.numbers; //numbers和和后端 res.put("data", Space)保持一致

			},
			//按标题查找
			async getSerchByName() {
				//console.log(this.queryInfo);
				const {
					data: resString1
				} = await this.$http.get('getBynames', {
					params: this.queryInfo
				})
				//console.log(resString1);
				var res1 = JSON.parse(resString1); //json转换为js对象
				//console.log(res1.numbers);
				this.squareList = res1.data;
				this.title = res1.numbers;
			},
			//展示修改框中的数据
			 async showEditDialog(id) {
				this.EditDialogVisible = true;
                //console.log(id);
				const {
					data: resString2
				} = await this.$http.get('getupdatesquare?id=' + id);
				//console.log(resString2)
				this.handleEditFrom = JSON.parse(resString2);
				
			}, 
			 // 监听 编辑学习笔记对话框的关闭事件
		    editDialogClosed() {
			      // 表单内容重置为空
			      this.$refs.handleEditFromRef.resetFields()
			    },
			    // 点击确认 编辑修改学习笔记
			editsquareInfo() {
				 
			     this.$refs.handleEditFromRef.validate(async valid=> {
					 var _this=this; 
					  if (valid) {
					  //发起修改用户的数据请求
					  //console.log(this.handleEditFrom)
					const {
						data: res
						} = await this.$http.put('editsquare',this.handleEditFrom);
				  
				   
				   if(JSON.parse(res).flag !=="success")return this.$title.error('修改失败');
				  }
				  //关闭对话框
				  this.EditDialogVisible=false;
				  //刷新数据列表
				  this.getSquareList();
				  //提示修改成功
				  this.$message('修改成功');
				   })
				 
			    }, 
			//分页功能的函数实现
			handleSizeChange(newSize) {
				console.log('newSize:',newSize);
				this.queryInfo.pageSize = newSize;
				this.getSquareList();
			},
			handleCurrentChange(newPage) {
				console.log('newPage:',newPage);
				this.queryInfo.pageNum = newPage;
				this.getSquareList();
			},
            //添加页面的跳转
			goAddsqPage() {
				this.$router.push('/square/addsq');
			}, 
			//// 点击确认 删除学习笔记
			 async removeById(id){
			//console.log(id)
				//弹框询是否确定删除
			 const confirmResult = await this.$confirm('此操作将永久删除帖子 是否继续?', '提示', {
				          confirmButtonText: '确定',
				          cancelButtonText: '取消',
				          type: 'warning'
				        },
					).catch(err => err)
			//如果确定删除，则返回值为字符串confirm
			//如果取消删除，则返回值为字符串cancel
			//console.log(confirmResult)
			if(confirmResult!=="confirm"){
				return this.$message.info('已取消删除');
			}
			const{data:squ} = await this.$http.delete("deletesquare?id=" + id)
			console.log(squ);
				if(squ!=="success"){
					return this.$message.error('删除帖子失败！');
				}
				this.$message.success('删除帖子成功！');
				this.getSquareList();
		
			} 
		}
	}
</script>

<style lang="less" scoped>
	.box {
		margin-bottom: 10px;

	}

	.el-breadcrumb {
		margin-left: 5px;
		margin-top: 5px;
		margin-bottom: 5px;
		font-size: 17px;
		font-weight: 700;
	}


	.el-card {
		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
		margin: 10px;
	}
</style>
